<template>
	<view class="loginview">
		<view class="topBar">
			<hx-navbar :background-color="navbarConfig.background" :fixed="true" :back="true" transparent="show" :color="navbarConfig.color"
			 title="修改密码"></hx-navbar>
		</view>

		<view class="form-box">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="150" label="原密码:" prop="password1">
					<u-input v-model="form.password1" type="password" placeholder="请输入密码" />
				</u-form-item>
				<u-form-item label-width="150" label="新密码:" prop="password2">
					<u-input v-model="form.password2" type="password" placeholder="请输入密码" />
				</u-form-item>
				<u-form-item label-width="150" label="确认密码:" prop="password3">
					<u-input v-model="form.password3" type="password" placeholder="请输入密码" />
				</u-form-item>
			</u-form>
		</view>

		<view class="fiexd-btm">
			<u-button class="custom-style" type="primary" @tap="submit">保存</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		data() {
			return {
				form: {
					password1: null,
					password2: null,
					password3: null
				},
				rules: {
					password1: [{
						required: true,
						min: 6,
						message: '密码不能少于6个字符',
						trigger: 'change'
					}],
					password2: [{
						required: true,
						min: 7,
						message: '密码不能少于7个字符',
						trigger: 'change'
					}],
					password3: [{
						required: true,
						min: 7,
						message: '密码不能少于7个字符',
						trigger: 'change'
					}, {
						// 自定义验证函数，
						validator: (rule, value, callback) => {
							return this.form.password2 == this.form.password3;
						},
						message: '两次输入密码不一致',
						trigger: 'change'
					}]
				}
			}
		},

		methods: {
			submit(e) {
				this.$refs.uForm.validate(valid => {
					if (!valid) {
						console.log('验证失败');
						return
					} else {
						this.$api.request('POST', '/api/user/updatePassword', {
							password: this.form.password1,
							newPassword: this.form.password2
						}).then(res => {
							this.$api.msg('修改成功')
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}, 500)
						})
					}
				});
			}
		}
	}
</script>

<style lang="less">
</style>
